<template>
  <Row class="p-componentTest">
    <Col flex="252px" class="leftwp" :wrap="false">
      <Menu :active-name="curMenuName" @on-select="changeMenu">
        <template v-for="(item, index) in componentList">
          <MenuItem v-if="item.name" :key="index" :name="'step' + index"> {{item.name}} {{item.title}} </MenuItem>
        </template>
      </Menu>
    </Col>
    <Col flex="auto" class="rightwp">
      <div class="contentwp" v-show="curData.name" target="_blank">
        <h1 class="title">{{curData.name}}: {{curData.title}}</h1>
        <h2 class="subTitle">概述</h2>
        <div class="desc">{{curData.title}}</div>
        <components :is="curData.compName || curData.name" />
      </div>
      <BackTop></BackTop>
    </Col>
  </Row>
</template>

<script>
import demo from './demo/demo'
import apiDemo from './demo/apiDemo'
import cfgEditTable from './demo/cfgEditTable'
import fieldCell from './demo/fieldCell'

export default {
    components: {
        demo, cfgEditTable, fieldCell, apiDemo,
    },
    data() {
        return {
            curMenuName: 'step0',
            componentList: [
                {
                    name: 'fieldCell', title: '表单-基础输入组件',
                    desc: '表单组件集合，根据type包括input ',
                },
                {
                    name: 'cfgEditTable', title: '可编辑table',
                    desc: '基于iview封装的可以编辑的表格，每行记录的字段都可以编辑，并且支持增行、删除',
                },
                {
                    name: 'api', title: '调用api的demo', compName: 'apiDemo',
                    desc: '在业务代码中调用api请求数据的demo, 配置文件路径: public/service/scenario/function/'
                },
                // {
                //     name: 'cfgTable', title: '增删改查table',
                //     desc: '支持增删改查的table组件',
                // },
            ],
        }
    },
    methods: {
        changeMenu(val) {
            console.log("file: index.vue:95  changeMenu  val:", val, this.curMenuName)
            this.curMenuName = val
        },
    },
    computed: {
        curData() {
            let res = {}
            if ( /^step/.test(this.curMenuName) ) {
                res = this.componentList[this.curMenuName.replace('step', '')*1]
            }
            console.log("file: index.vue:99  curData  res:", this.curMenuName,res)
            return res
        }
    }
}
</script>

<style lang="less">
.p-componentTest {
    flex-wrap: nowrap;
    textarea.jsoneditor-text, .ace-jsoneditor {
        min-height: 400px;
    }
    .ace_text-input {
        height: auto!important;
    }
    .ivu-table-cell {
        position: relative;
    }
    .leftwp,.rightwp {
        height: calc(~"100vh - 120px");
        overflow: auto;
        background-color: #fff;
    }
    .rightwp {
        padding: 16px 16px 32px;
        .ivu-form-item {
            margin-bottom: 6px;
        }
        .ivu-table-cell {
            padding:12px 18px;
        }
        h1 {
            margin: 16px 0;
        }
        h2 {
            margin: 30px 0;
        }
        h3 {
            margin: 16px 0 6px;
        }
        code {
            padding: 0 6px;
            margin: 0;
            font-size: 85%;
            background-color: #fff5f5;
            border-radius: 3px;
            font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
            color: #fa795e;
        }
    }
}
</style>
